<script setup lang="ts">
import { Picture as IconPicture } from "@element-plus/icons-vue";
import { useHomeStore } from "@/stores/index";
import { storeToRefs } from "pinia";
const homeStore = useHomeStore();
const { verificationCodeImg } = storeToRefs(homeStore);
const { getVerificationCodeImg } = homeStore;
</script>

<template>
  <el-image
    style="width: 100px; margin-left: 10px; height: 100%"
    :src="verificationCodeImg"
    fit="cover"
    @click="getVerificationCodeImg"
  >
    <template #error>
      <div class="image-slot">
        <el-icon><icon-picture /></el-icon>
      </div>
    </template>
  </el-image>
</template>

<style scoped lang="less">
.image-slot {
  text-align: center;
  background-color: #f5f7fa;
}
</style>
